<!--
  Created by linQC on 2021/6/24 17:27.
-->

<template>
  <div id="app" class="echarts-container">
    <div class="statics-progress">
      <div id="myCircle" :style="{ height: '300px'}"></div>
    </div>
    <div class="static-line">
      <div id="myChart" :style="{ height: '500px'}"></div>
    </div>
  </div>
</template>

<script>
  var echarts = require('echarts');
  export default {
    name: 'app',
    /** 本页面用到的组件 */
    components: {},

    /** 本页面的属性 */
    data() {
      return {
        statics: {
          top: [],
          name: [],
          support_num: [],
        }
      }
    },

    /** 计算属性 */
    computed: {},

    /** 构建页面时 */
    mounted() {
      this.loadInitData();
    },

    /** 每次进入页面时 */
    activated() {

    },

    /** 每次退出页面时 */
    deactivated() {

    },
    created() {
      var then = this;
      setTimeout(function () {
        then.circle();
        then.drawLine();
      }, 500);
    },
    /** 本页面可用的方法 */
    methods: {
      loadInitData() {
        let party_id = this.$route.query.id?this.$route.query.id:'';
        this.$http.get('/api/root/party/census', {
          page: this.page,
          pagesize: this.pageSize,
          keyword: this.keyword,
          party_id
        }).then(rest => {
          if (rest.code == 1) {
            this.statics = {...rest.data};
          }
        })
      },

      circle() {
        // 基于准备好的dom，初始化echarts实例
        let myCircle = echarts.init(document.getElementById('myCircle'));
        // 绘制图表
        myCircle.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '圆形图',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.statics.top
            }
          ]
        });
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 屏幕尺寸变化时，重新调整图表元素大小
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);
        // 绘制图表
        myChart.setOption({
          title: {text: '树状统计图'},
          tooltip: {},
          xAxis: {
            data: this.statics.name,
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: this.statics.support_num,
          }]
        });
      }
    },
  }
</script>

<!--<style scoped>-->
<style lang="less" scoped>
  .echarts-container {
    padding: 20px;
    background-color: #F5F5F5;
  }
  .statics-progress{
    background-color: #fff;
    margin-bottom: 20px;
  }
  .static-line{
    background-color: #fff;
    padding: 20px;
  }
</style>
